<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="12">
            <a-col :md="4" :sm="8">
              <a-form-item label="车牌号">
                <a-input v-model="queryParam.plateNo" placeholder="请输入车牌号"></a-input>
              </a-form-item>
            </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="车辆类型">
              <a-select placeholder="请选择车辆类型" v-model="queryParam.carType">
                <a-select-option :value="0">无牌车</a-select-option>
                <a-select-option :value="1">有牌车</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="车辆性质">
              <a-select placeholder="请选择车辆性质" v-model="queryParam.carNature">
                <!--                0:临时车,1:月租车2:储值车3：军警车4：白名单5:预约车-->
                <a-select-option :value="0">临时车</a-select-option>
                <a-select-option :value="1">月租车</a-select-option>
                <a-select-option :value="2">储值车</a-select-option>
                <a-select-option :value="3">军警车</a-select-option>
                <a-select-option :value="4">白名单</a-select-option>
                <a-select-option :value="5">预约车</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="4">
            <a-form-item>
              <a-date-picker placeholder="开始日期" @change="onChangeStartTime"/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="4">
            <a-form-item>
              <a-date-picker placeholder="结束日期" @change="onChangeEndTime"/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <span class="table-page-search-submitButtons" style="float: left;overflow: hidden;">
              <a-button icon="search" type="primary" @click="searchQuery">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button icon="download" type="primary" @click="handleExportXls('车辆入场信息')">导出</a-button>
    </div>
    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        bordered
        rowKey="id"
        size="middle"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <parkCarEnterLog-modal ref="modalForm" @ok="modalFormOk"></parkCarEnterLog-modal>
  </a-card>
</template>

<script>
  import parkCarEnterLogModal from './modules/parkCarEnterLogModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {deleteAction, downFile, getAction} from '@/api/manage'
  import {filterObj} from '@/utils/util';

  export default {
    name: "parkCarInfoList",
    mixins: [JeecgListMixin],
    components: {
      parkCarEnterLogModal
    },
    data() {
      return {
        description: '车辆入场信息管理页面',
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '停车场名称',
            align: "center",
            dataIndex: 'parkName'
          },
          {
            title: '车牌号',
            align: "center",
            dataIndex: 'plateNo'
          },
          {
            title: '车辆类型',
            align: "center",
            dataIndex: 'carType',
            customRender: (v) => ('0' === v ? '无牌车' : '有牌车'),
          },
          {
            title: '车辆性质',
            align: "center",
            dataIndex: 'carNature',
            customRender: (v,record) =>{
              if (v === "0") {
                if(record.carTypeNo ==="-1" || record.carTypeNo === -1){
                  return "内部车";
                }
                return "临时车";
              }else if(v==="1"){
                return "月租车";
              }else if(v==="2"){
                return "储值车";
              }else if(v==="3"){
                return "军警车";
              }else if(v==="4"){
                return "白名单";
              }
            },
          },
          {
            title: '进场时间',
            align: "center",
            dataIndex: 'carEnterTime'
          },
          {
            title: '车辆进场地点',
            align: "center",
            dataIndex: 'armName'
          },
          {
            title: '抓拍图片',
            align: "center",
            dataIndex: 'imgPath',
            customRender: (record, row, index) => {
              let r = record
              return (
                <img
                  style="max-width:35px;max-height:35px;min-height:20px;min-width:20px;text-align:center;cursor:pointer;border:1px #BFBFBF solid;padding: 2px 2px 2px 2px;background-color:white;"
                  preview={r}
                  src={record}
                ></img>
              )
            }
          },
          {
            title: '车辆状态',
            align: "center",
            dataIndex: 'isOut',
            customRender: (x) => ('0' == x ? '未出场' : '已出场')
          },
          {
            title: '创建时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        url: {
          list: "/parking/parkCarEnterLog/list",
          delete: "/parking/parkCarEnterLog/delete",
          deleteBatch: "/parking/parkCarEnterLog/deleteBatch",
          exportXlsUrl: "parking/parkCarEnterLog/exportXls",
          importExcelUrl: "parking/parkCarEnterLog/importExcel",
        },
        queryParam: {
          "createTime_begin": "",
          "createTime_end": "",
          "type": "-1",

        },
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    created() {

      this.keyupEnter()
    },
    methods: {
      daysBetween(sDate1, sDate2) {
        //Date.parse() 解析一个日期时间字符串，并返回1970/1/1 午夜距离该日期时间的毫秒数
        let time1 = Date.parse(new Date(sDate1).toDateString());
        let time2 = Date.parse(new Date(sDate2).toDateString());
        let nDays = Math.abs(parseInt((time2 - time1) / 1000 / 3600 / 24));
        return nDays;
      },
      handleExportXls(fileName) {

        let startTime = this.queryParam.createTime_begin;
        let endTime = this.queryParam.createTime_end;
        let opDesc = this.queryParam.opDesc;
        let dayTime = startTime;
        if (startTime == "") {
          this.$message.error("请选择导出开始日期");
          return
        }
        if (endTime == "") {
          this.$message.error("请选择导出结束日期");
          return
        }
        if (startTime != "" && endTime != "") {
          if (startTime > endTime) {
            this.$message.error("开始时间不能大于结束时间");
            return
          }
          if (this.daysBetween(startTime, endTime) + 1 > 15) {
            this.$message.error('仅支持15天数据导出,请选择导出日期')
            return
          }
        }

        if (startTime == "" && endTime != "") {
          this.$message.error("请选择开始时间");
          return
        }

        if (startTime != "" && endTime == "") {
          this.$message.error("请选择结束时间");
          return
        }


        this.queryParam.dayTime = dayTime;
        fileName = dayTime + fileName;
        let param = {...this.queryParam};
        if (this.queryParam.createTime_begin != "" && this.queryParam.createTime_end != "") {
          param.createTime_begin = this.queryParam.createTime_begin + " 00:00:00";
          param.createTime_end = this.queryParam.createTime_end + " 23:59:59";
        }

        downFile(this.url.exportXlsUrl, param).then((data) => {
          if (!data) {
            this.$message.error("文件下载失败")
            return
          }
          if(data.size===0){
            this.$message.warning("当前时段内没有车辆出场记录")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
          }
        })
      },


      onChangeStartTime(date, dateString) {
        this.queryParam.createTime_begin = dateString;
      },

      onChangeEndTime(date, dateString) {
        this.queryParam.createTime_end = dateString;
      },


      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },

      searchQuery() {
        let startTime = this.queryParam.createTime_begin;
        let endTime = this.queryParam.createTime_end;

        if (startTime != "" && endTime != "") {
          if (startTime > endTime) {
            this.$message.error("开始时间不能大于结束时间");
            return
          }
        }

        if (startTime == "" && endTime != "") {
          this.$message.error("请选择开始时间");
          return
        }

        if (startTime != "" && endTime == "") {
          this.$message.error("请选择结束时间");
          return
        }

        this.loadData(1);
      },

      getQueryParams() {

        var param = Object.assign({}, this.isorter, this.queryParam);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        if (this.queryParam.createTime_begin != "" && this.queryParam.createTime_end != "") {
          param.startTime = this.queryParam.createTime_begin + " 00:00:00";
          param.endTime = this.queryParam.createTime_end + " 23:59:59";
        }
        return filterObj(param);
      },
      batchDel: function () {

        if (!this.url.deleteBatch) {
          this.$message.error("请设置url.deleteBatch属性!")
          return
        }
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectionRows.length; a++) {
            ids += this.selectionRows[a].invateuserdetailId + ",";
          }
          var that = this;
          this.$confirm({
            title: "确认删除",
            content: "是否删除选中数据?",
            onOk: function () {
              deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.loadData();
                  that.onClearSelected();
                } else {
                  that.$message.warning(res.message);
                }
              });
            }
          });
        }
      },
      handleDelete: function (invateuserdetailId) {
        if (!this.url.delete) {
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {invateuserdetailId: invateuserdetailId}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      handleDetail: function (record) {
        this.$refs.modalForm.title = '详情';
        this.$refs.modalForm.edit(record);
      },

      keyupEnter() {
        document.onkeydown = e => {
          let body = document.getElementsByTagName('body')[0]
          if (e.keyCode === 13) {
            this.loadData(1);
            console.log(this.loadData(1))
          }
        }
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
